<template>
  <PageWrapper contentFullHeight fixedHeight>
    <header>
      <BasicForm @register="register" @submit="getStationData" style="width: 100%" />
    </header>

    <!-- 统计信息卡片区域 -->
    <div class="dashboard-container">
      <div class="left-container">
        <div class="stat-card phone-stats">
          <div class="stat-header">
            <Icon icon="mdi:phone-classic" size="24" color="#1890ff" />
            <h3>电话语音统计</h3>
          </div>
          <div class="stat-content">
            <div class="stat-item">
              <span class="label">发生总数</span>
              <span class="value">16条</span>
            </div>
            <div class="stat-item success">
              <span class="label">成功总数</span>
              <span class="value">8条</span>
            </div>
            <div class="stat-item error">
              <span class="label">失败总数</span>
              <span class="value">8条</span>
            </div>
          </div>
        </div>

        <div class="stat-card message-stats">
          <div class="stat-header">
            <Icon icon="mdi:message-text" size="24" color="#52c41a" />
            <h3>短信发送统计</h3>
          </div>
          <div class="stat-content">
            <div class="stat-item">
              <span class="label">发送总数</span>
              <span class="value">16条</span>
            </div>
            <div class="stat-item success">
              <span class="label">成功总数</span>
              <span class="value">8条</span>
            </div>
            <div class="stat-item error">
              <span class="label">失败总数</span>
              <span class="value">8条</span>
            </div>
          </div>
        </div>
      </div>

      <div class="right-container">
        <div class="chart-card">
          <div class="chart-header">
            <h3>数据统计图表</h3>
            <div class="chart-actions">
              <button class="action-btn">导出</button>
              <button class="action-btn">刷新</button>
            </div>
          </div>
          <div class="chart-content">
            <TableChart
              :chartOption="state.chartOption"
              :isShowSlot="true"
              :isShowTable="state.isShowTable"
              :isShowTipIndex="state.isShowTipIndex"
            />
          </div>
        </div>
      </div>
    </div>

    <VxeBasicTable class="w-full h-full" ref="tableRef" v-bind="gridOptions">
    </VxeBasicTable>
  </PageWrapper>
</template>

<script lang="ts" setup>
import {ref, reactive, watch, onMounted} from 'vue';
import { Icon } from '@gui-pkg/components';
import TableChart from "@/components/TableChart";
import { PageWrapper, BasicTableProps } from '@gui-pkg/antdcomponents';
import { VxeBasicTable, VxeGridInstance } from '@gui-pkg/antdcomponents';
import { columns, searchFormSchema } from './rain.data';
import {countBack, getMsgPageApi} from "@/api/warningInfo/baseData";

import { BasicForm, FormSchema, useForm } from "@gui-pkg/antdcomponents";
import dayjs from "dayjs";

const tableRef = ref<VxeGridInstance>();
const state = reactive({
  isShowTable: true,
  chartOption: null,
  stationData: null,
  isShowTipIndex: -1,
  tableDataSource: [],
  tableColumns: [
    { dataIndex: "tm", title: "监测时间", align: "center" },
    { dataIndex: "z", title: "水位(m)", align: "center" },
    { dataIndex: "q", title: "流量(m³/s)", align: "center" },
    { dataIndex: "wptn", title: "水势", align: "center" },
  ],
});
const defaultTime = [dayjs().subtract(7, "day"), dayjs()];
const schemas: FormSchema[] = [
  {
    field: "time",
    component: "RangePicker",
    defaultValue: [dayjs().subtract(7, "day"), dayjs()],
    label: "起止时间",
    colProps: { span: 8 },
    componentProps: {
      ranges: {
        '最近一天': [dayjs().subtract(1, "day"), dayjs()],
        '最近三天': [dayjs().subtract(3, "day"), dayjs()],
        '最近一周': [dayjs().subtract(7, "day"), dayjs()],
      },
    }
  },
];


const [register, { getFieldsValue }] = useForm({
  labelWidth: 80,
  schemas,
  actionColOptions: { span: 6 },
});

const gridOptions = reactive<BasicTableProps>({
  id: tableRef.value,
  keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  columns: columns,
  toolbarConfig: {
    className: "vxe-toolbarConfig",
  },
  // formConfig: {
  //   enabled: true,
  //   className: "vxe-formConfig",
  //   items: searchFormSchema,
  // },
  height: 'auto',
  proxyConfig: {
    ajax: {
      query: async ({ page, form }) => {
        const tableListData = await getMsgPageApi({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          phone:form.phone,
          beginTime:form.sendTime==null?"":form.sendTime[0],
          endTime:form.sendTime==null?"":form.sendTime[1],
        });
        console.log('tableListData',tableListData);
        return { list: tableListData.records,total: tableListData.total};
      },
    },
  },
});
const successCount = ref(null)
const failureCount = ref(null)

onMounted(async () => {
  const countData = await countBack();
  successCount.value = countData.sum1_success;
  failureCount.value = countData.sum1_fail;
});
</script>


<style lang="less" scoped>
.dashboard-container {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  height: 320px;

  .left-container {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    gap: 16px;

    .stat-card {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 16px;
      height: 50%;

      .stat-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 12px;

        h3 {
          margin: 0 0 0 8px;
          font-size: 16px;
          font-weight: 500;
          color: #333;
        }
      }

      .stat-content {
        .stat-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          padding: 8px 12px;
          border-radius: 6px;
          background: #f9f9f9;
          transition: all 0.3s;

          &:hover {
            background: #f0f7ff;
            transform: translateY(-2px);
          }

          .label {
            font-size: 14px;
            color: #666;
          }

          .value {
            font-weight: 500;
            color: #333;
          }

          &.success {
            border-left: 4px solid #52c41a;
          }

          &.error {
            border-left: 4px solid #ff4d4f;
          }
        }
      }
    }
  }

  .right-container {
    flex: 1;

    .chart-card {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      height: 100%;
      display: flex;
      flex-direction: column;

      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid #f0f0f0;

        h3 {
          margin: 0;
          font-size: 16px;
          font-weight: 500;
          color: #333;
        }

        .chart-actions {
          display: flex;
          gap: 8px;

          .action-btn {
            padding: 6px 12px;
            background: #f5f5f5;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
              background: #1890ff;
              color: #fff;
              border-color: #1890ff;
            }
          }
        }
      }

      .chart-content {
        flex: 1;
        padding: 16px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .dashboard-container {
    flex-direction: column;
    height: auto;

    .left-container {
      flex: none;
      flex-direction: row;
      height: auto;

      .stat-card {
        flex: 1;
        height: auto;
      }
    }
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    .left-container {
      flex-direction: column;
    }
  }
}
</style>
